<template>
    <div class="wrap">
        <p>物料基础信息</p>
        <div class="header" :span="24" style="border-bottom: 1px dashed rgb(205, 221, 229)">
            <el-col class="header_img" :span="5">
                <img src="../../assets/music.jpg" alt="">
            </el-col>
            <el-col class="header_step" :span="15" :offset="3">
                <div>
                    <ul>
                        <li><span>人工核验状态：</span></li>
                        <li><span>xml生产状态：</span></li>
                        <li><span>物料推送状态：</span></li>
                    </ul>
                </div>
                <div class="step">
                    <el-steps :space="200" finish-status="success">
                        <el-step title="未核验">
                            <i class="icon-ddex-search-mcc" slot="icon"></i>
                        </el-step>
                        <el-step title="未开始" icon="time"></el-step>
                        <el-step title="未开始" icon="time"></el-step>
                    </el-steps>
                </div>
            </el-col>
            <el-col class="header_btn" :span="4">
                <el-button type="primary" class="icon-ddex-XML">
                    <span style="padding-left: 10px;">预览XML文件</span>
                </el-button>
            </el-col>
        </div>
        <!--表单 第一行-->
        <el-form :inline="true" ref="form" :model="form" label-width="150px">
            <el-form-item label="物料序号：" :span="8">
                <el-input v-model="form.materialno"></el-input>
            </el-form-item>
            <el-form-item label="创建者：" :span="8">
                <el-input v-model="form.creater"></el-input>
            </el-form-item>
            <el-form-item label="创建时间：" :span="8">
                <el-input v-model="form.createtime"></el-input>
            </el-form-item>
            <!--第二行-->
            <el-form-item label="上传时间：" :span="8">
                <el-input v-model="form.uploadtime"></el-input>
            </el-form-item>
            <el-form-item label="修改者：" :span="8">
                <el-input v-model="form.modifier"></el-input>
            </el-form-item>
            <el-form-item label="修改时间：" :span="8">
                <el-input v-model="form.modifytime"></el-input>
            </el-form-item>
            <!--第三行-->
            <el-form-item label="音频文件总数：" :span="8">
                <el-input v-model="form.totalaudiofile"></el-input>
            </el-form-item>
            <el-form-item label="歌词文件总数：" :span="8">
                <el-input v-model="form.totallyricsfile"></el-input>
            </el-form-item>
            <i class="star">*</i>
            <el-form-item label="Album Cover File：" :span="8">
                <el-input v-model="form.albumfile"></el-input>
            </el-form-item>
        </el-form>
        <!--面板-->
        <ArtistInfo></ArtistInfo>
        <div style="width: 100%;height: 20px;background-color: #F0F0F0;clear: both;"></div>
        <TrackInfo></TrackInfo>
        <div style="width: 100%;height: 20px;background-color: #F0F0F0;clear: both;"></div>
        <TrackInfo></TrackInfo>
        <div style="width: 100%;height: 20px;background-color: #F0F0F0;clear: both;"></div>
        <el-col :span="24">
            <el-button type="primary" size="large" style="margin: 20px 500px;">
                <i style="margin-right: 10px;" class="icon-ddex-Checked"></i>已完成全部核验</el-button>
        </el-col>
    </div>
</template>
<script>
import ArtistInfo from './manualCheck_artist.vue';
import TrackInfo from './manualCheck_track.vue';
export default {
    components: {
        ArtistInfo,
        TrackInfo
    },
    data() {
        return {

            form: {
                materialno: '',
                creater: '',
                createtime: '',
                uploadtime: '',
                modifier: '',
                modifytime: '',
                totalaudiofile: '',
                totallyricsfile: '',
                albumfile: ''
            },
            /* arrowDown: true,
             partner: {
             "supplier": "QQ",
             "musiclabel": "千和世纪"
             },
             albumid: {
             "id": "11",
             "upc": "123456",
             "catalogno": "",
             "grid": "",
             "ean": "",
             "pid": ""
             },
             albumname: {
             "language": "ZH",
             "title": "",
             "versiontitle": "",
             "destitle": ""
             },
             artistone: {
             "sequence": "",
             "artistid": "",
             "zh": "",
             "en": "",
             "pinyin": "",
             },
             artisttwo: {
             "sequence": "",
             "zh": "",
             "pinyin": "",
             },
             artistthree: {
             "sequence": "",
             "zh": "",
             "pinyin": "",
             },
             albumdetail: {
             "genr": "",
             "language": "",
             "totaldisks": "",
             "subgenre": "",
             "Territory": "",
             "totaltracks": "",
             "explicit": "",
             "duration": "",
             "releasedate": "",
             "startdate": "",
             "isexclusive": "",
             "commodel": "",
             "enddate": "",
             "ismulti": "",
             "usetype": ""
             },
             other: {
             "keyword": "",
             "synopsis": "",
             }*/

        }
    }
}
</script>
<style scoped lang="less" rel="stylesheet/less">
.wrap {
    margin: 0 40px;
    p {
        font-size: 18px;
        font-weight: bold;
        color: #333;
    }
    .header {
        margin-top: 30px;
        margin-bottom: 20px;
        height: 160px;
        .header_img {
            width: 100px;
            height: 100px;
            float: left;
            margin-top: 20px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .header_step {
            float: left;
            ul {
                li {
                    list-style: none;
                    float: left;
                    margin-right: 100px;
                    span {
                        font-size: 14px;
                        color: #999;
                    }
                }
            }
            .step {
                clear: both;
                padding-top: 10px;
                padding-left: 50px;
            }
        }
        .header_btn {
            margin-top: 50px;
            float: right;
        }
    }
    .el-form {
        .el-form-item {
            margin-right: 20px;
        }
    }
    .el-collapse {
        text-align: left; //绿色圆圈
        .circle {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-top: 20px;
            border-radius: 50%;
            background-color: #38b74b;
            margin-bottom: 8px;
        } //右侧按钮
        .arrow {
            display: inline-block;
            width: 80px;
            height: 30px;
            line-height: 34px;
            margin-top: 15px;
            border-radius: 20px;
            background-color: #def3fd;
            float: right;
            text-align: center;
        } //编辑按钮
        .icon-ddex-edits {
            color: green;
            background: #d8f2da;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 50%;
            display: inline-block;
            margin-left: 70px;
            font-size: 17px;
        }
        .album_icon {
            position: relative;
            height: 70px;
            .icon_green {
                font-size: 20px;
                line-height: 70px;
                margin-left: 100px;
                color: #3bb647;
                margin-right: 10px;
            }
            .triggle {
                width: 0px;
                height: 0px;
                border-top: 30px solid transparent;
                border-right: 30px solid transparent;
                border-bottom: 30px solid transparent;
                border-left: 30px solid #3bb647;
                position: absolute;
                top: -30px;
                right: -30px;
                transform: rotate(-45deg);
            }
            .icon_check {
                position: absolute;
                top: 8px;
                right: 4px;
                color: #fff;
            }
        } //新歌图表
        .icon_newsong {
            color: #3bb647;
            font-size: 20px;
            display: inline-block;
            position: absolute;
            right: 66px;
        }
        .el-form {
            .el-form-item {
                .el-select {
                    width: 192px;
                }
            }
        }
    }
}

.fontSize_gray {
    font-size: 14px;
    color: #999999;
    padding-right: 10px;
}

.fontSize_blue {
    font-size: 18px;
    font-weight: bold;
    color: #0b9eea;
}

.fontSize_black {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
</style>
<style>
/*设置左箭头为无*/

.el-icon-arrow-right:before {
    /*content: "\E606";*/
    content: "" !important;
}

.el-collapse-item__header {
    height: 60px !important;
    line-height: 60px !important;
    padding-left: 0 !important;
    ;
    border: none !important;
    ;
}

.el-collapse-item__wrap {
    float: left !important;
}

.el-input {
    width: auto;
}

.star {
    color: red;
    line-height: 10px;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-top: 15px;
    font-weight: bolder;
    margin-right: -8px;
}

.bg_green {
    background-color: #38b74b;
}

.bg_orange {
    background-color: #fea504;
}

.bg_red {
    background-color: #fb6772;
}
</style>